import React from "react";
import './index.css';
import { Button } from 'antd';
import Blank from "../../Component/Blank";
import ColorBoxDetail from "../../Component/ColorBoxDetail";


export default class extends React.Component{
    constructor(props){
        super();
        this.state={
            ok:props.ok,
            cancel:props.cancel
        }
    }

    ok(){
        this.state.ok();
    }

    cancel(){
        this.state.cancel();
    }
    render(){
        return(
            <div >
                <div>
                    <div className="QualityPayModel_PriceLeft">
                        <div>
                            <span className="QualityPayModel_PriceLeft_Price">50</span>
                            <span className="QualityPayModel_PriceLeft_Unit">元</span>
                        </div>
                        <div className="QualityPayModel_PriceLeft_Desc">
                            <span>满1000可用</span>
                        </div>
                    </div>
                    <div className="QualityPayModel_PriceRight">
                        <div className="QualityPayModel_PriceRight_Title">
                            <span>满1000减50代金券</span>
                        </div>
                        <div className="QualityPayModel_Date_Desc">
                            <span>有效期：2019.6.1-2019.6.30</span>
                        </div>
                        <div>
                            <span className="QualityPayModel_Date_Desc QualityPayModel_PriceRight_Desc">¥100</span>
                            <span className="QualityPayModel_PriceRight_Desc_Price">¥ 95</span>
                        </div>
                    </div>
                </div>
                <div className="QualityPayModel_Info_Title">
                    <div>选择优惠券</div>
                    <div  className="QualityPayModel_Info_Price">
                        <span  className="QualityPayModel_Info_PriceBox">
                            <ColorBoxDetail  paddingBottom="0.3rem" paddingTop="0.3rem" width="9rem" text="5元" fontColor="" bgColor="#F7F7F7"/>
                        </span>
                        <span  className="QualityPayModel_Info_PriceBox">
                            <ColorBoxDetail paddingBottom="0.3rem" paddingTop="0.3rem" width="9rem" text="100元" borderColor="#5390F0" fontColor="#5390F0" bgColor="#F7F7F7"/>
                        </span>
                        <span  className="QualityPayModel_Info_PriceBox">
                            <ColorBoxDetail  paddingBottom="0.3rem" paddingTop="0.3rem" width="9rem" text="200元" fontColor="" bgColor="#F7F7F7"/>
                        </span>
                    </div>
                </div>
                <div>
                    <div className="flexContainer QualityPayModel_Info_Title">数量 <Blank/></div>
                </div>
                <div style={{textAlign:"center", marginTop:"0.3rem"}}>
                    <Button  style={{width:"12rem"}} shape="round"  size="large" onClick={e=>this.ok()}>
                    取消
                    </Button>
                    <Button  style={{width:"12rem", marginLeft:"0.5rem"}} type="primary" shape="round"  size="large"  onClick={e=>this.cancel()}>
                    确认
                    </Button>
                </div>
            </div>
        )
    }
}